<template>
  <div class="list">
    <mt-index-list>
      <mt-index-section v-for="(item,pyIndex) in listPys"
                        :index="pyIndex"
                        :key="pyIndex"
                        v-show="listPys[pyIndex].length">
        <mt-cell :title="item.list[0].userName"
                 v-for="(item,index) of listPys[pyIndex]"
                 :key="index">
          {{item.list[0].positionName}}
        </mt-cell>
      </mt-index-section>
    </mt-index-list>
  </div>
</template>

<script>
import { IndexList, IndexSection, Cell } from 'mint-ui'
import ComFetch from 'common/fetch'
import Py from 'common/py' // 中文转拼音
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'List',
  components: {
    [IndexList.name]: IndexList,
    [IndexSection.name]: IndexSection,
    [Cell.name]: Cell
  },
  data () {
    return {
      list: [],
      listPy: {
        'A': [],
        'B': [],
        'C': [],
        'D': [],
        'E': [],
        'F': [],
        'G': [],
        'H': [],
        'I': [],
        'J': [],
        'K': [],
        'L': [],
        'N': [],
        'M': [],
        'O': [],
        'P': [],
        'Q': [],
        'R': [],
        'S': [],
        'T': [],
        'U': [],
        'V': [],
        'W': [],
        'X': [],
        'Y': [],
        'Z': []
      },
      tolistPys: ''
    }
  },
  computed: {
    listPys () { // 中文转拼音
      let tolistPys = this.tolistPys
      if (tolistPys) {
        return tolistPys
      }
      let listPy = this.listPy
      this.list.forEach((item, index) => {
        let userName = item.list[0].userName
        let pyUserName = (Py.ConvertPinyin(userName))[0]
        for (var index2 in listPy) {
          if (index2 === pyUserName) {
            let info = listPy[index2]
            info.push(item)
          }
        }
        // item.list[0].pyUserName = (Py.ConvertPinyin(userName))[0]
      })
      return listPy
    },
    ...mapState({
      mailListData: 'mailListData'
    })
  },
  watch: {
  },
  methods: {
    findAllUserInfo () {
      ComFetch.post('/phone/userInfo/findAllUserInfo', {
      })
        .then(res => {
          if (res.data) {
            let content = res.data.content || ''
            content = JSON.parse(content) || []
            this.list = content
          }
        })
        .catch(res => { })
    },
    ...mapMutations(['mailLists'])
  },
  mounted () {
    // 调用vuex储存的数据 如已有数据则不再请求
    // let mailListData = this.$store.dispatch('changeCity', city)
    if (!this.mailListData) {
      this.findAllUserInfo()
      this.mailLists(this.listPys)
    } else {
      this.tolistPys = this.mailListData
    }
    // console.log(this.mailListData)
    // console.log(this.mailListData)
    // console.log(this.tolistPys)
    // console.log(this.tolistPys.C[0].list)
  }
}
</script>

<style lang="stylus" scoped>
</style>
